<template>
  <div class="dream">
    <nav-bar></nav-bar>
    <div class="dream-page clearfix">
      <div class="left">
        <div class="xyd-carousel-container">
          <el-carousel height="372px" trigger="click" arrow="never" :interval="5000">
            <el-carousel-item v-for="item,i in ads" :key="i">
              <img :src="item.image_url" style="width:100%;height:100%;"/>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="page-bottom">
          <div class="title">本期梦想</div>
          <div class="pb-container clearfix">
            <dream-card :value="item" v-for="item,i in now" :key="i"></dream-card>
          </div>
          <div class="btn-group">
            <button class="green-btn" @click="goMyDream">我参与的</button>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="xyd-container">
          <div class="xyd-c-title">最新揭晓</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="item,i in result" :key="i">
                <div class="img"><img :src="item.image_url"/></div>
                <div class="text">{{item.title}}</div>
              </li>
              <li>
                <button class="normal-btn-outline">查看更多</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDreamList } from 'api/dream'
import { NavBar } from 'views/layout'
import DreamCard from 'views/components/dreamCard'
import dream from '@/assets/mock_images/dream.png'
export default {

  name: 'dream',
  components: {
    NavBar,
    DreamCard
  },
  data() {
    return {
      dream,
      now: [],
      ads: [],
      result: []
    }
  },
  created() {
    getDreamList()
    .then(res => {
      console.log(res)
      this.now = res.data.product
      this.ads = res.data.ads
      this.result = res.data.result
    })
    .catch(err => console.log(err))
  },
  methods: {
    goMyDream() {
      this.$router.push('/mall/my-dream')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.dream{
  .dream-page{
    width: 1200px;
    margin: 0 auto;
    .left{
      float: left;
      width: 960px;
      margin-right: 30px;
      .xyd-carousel-container{
        .el-carousel__indicators{
          left: 50px;
        }
      }
      .page-bottom{
        .title{
          font-size: 20px;
          height: 60px;
          line-height: 60px;
          margin-top: 20px;
          color: #999;
        }
        .pb-container{
          margin: -10px;
        }
        .btn-group{
          margin-top: 50px;
          text-align: center;
          >button{
            width: 100px;
          }
        }
      }
    }
    .right{
      float: left;
      width: 210px;
      .xyd-container{
        .xyd-c-content{
          >ul{
            padding: 5px;
            >li{
              &:last-child{
                text-align: center;
              }
              padding: 10px 0;
              .img{
                width: 100%;
                img{
                  width: 100%;
                }
              }
              .text{
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
</style>